<script setup lang="ts">
import { useRoute } from 'vue-router';
import { eventdata } from '@/assets/eventdata';
import AOS from 'aos';
import 'aos/dist/aos.css';

// 在组件挂载时初始化AOS
onMounted(() => {
  AOS.init();
});

defineOptions({
  name: 'WaterPage',
});

const route = useRoute();

// 从路由参数获取id
const itemId = route.params.id;

// 根据id 获取数据
const currentData = eventdata.find((event) => event.id === Number(itemId));

// 定义一个函数，用于生成每个图片不同的动画配置
const generateImageAosConfig = (index: number) => {
  const animations = [
    'fade-up',
    'fade-down',
    'fade-left',
    'fade-right',
    'zoom-in',
    'zoom-out'
  ];
  const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
  const duration = Math.floor(Math.random() * 1000 + 500); // 生成500 - 1500之间的随机持续时间
  const delay = Math.floor(Math.random() * 500); // 生成0 - 500之间的随机延迟时间

  return {
    animation: randomAnimation,
    duration,
    delay
  };
};
</script>

<template>
  <div class="waterfall">
    <div
      class="waterfall-content"
      data-aos="fade-down"
      data-aos-easing="linear"
      data-aos-duration="500"
    >
      <h1 class="waterfall-content-title">{{ currentData?.title }}</h1>
      <h2 class="waterfall-content-p">{{ currentData?.content }}</h2>
    </div>
    <div class="waterfall-images">
      <div
        v-for="(image, index) in currentData?.allImages"
        :key="index"
        class="waterfall-image-item"
        :data-aos="generateImageAosConfig(index).animation"
        :data-aos-duration="generateImageAosConfig(index).duration"
        :data-aos-delay="generateImageAosConfig(index).delay"
      >
        <a-image :src="image" alt="" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.waterfall {
  width: 100%;
  &-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    &-title {
      font-size: 40px;
    }
    &-p {
      margin-top: 20px;
      font-size: 20px;
    }
  }
  &-images {
    column-count: 4; /* 列数 */
    column-gap: 10px; /* 列间距 */
    margin-top: 30px;
  }
  &-image-item {
    break-inside: avoid; /* 防止图片跨列 */
    margin-bottom: 10px;
    img {
      width: 100%;
      display: block;
      border-radius: 8px;
    }
  }
}
</style>